<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-aside width=15%>
      <el-scrollbar>
        <el-menu :default-openeds="[]" :default-active="activeMenu" @select="handleMenuSelect">
          <!-- 直接基于带children的菜单数据渲染 -->
          <template v-for="menu in menus" :key="menu.id">
            <!-- 有子菜单(children不为空) -->
            <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.id.toString()">
              <template #title>
                <el-icon>
                  <icon-menu />
                </el-icon>
                {{ menu.menuName }}
              </template>
              <!-- 直接渲染子菜单 -->
              <template v-for="child in menu.children" :key="child.id">
                <el-menu-item :index="child.id.toString()">
                  <el-icon>
                    <icon-menu />
                  </el-icon>
                  <span>{{ child.menuName }}</span>
                </el-menu-item>
              </template>
            </el-sub-menu>

            <!-- 无子菜单的节点 -->
            <el-menu-item v-else :index="menu.id.toString()">
              <el-icon>
                <icon-menu />
              </el-icon>
              <span>{{ menu.menuName }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 16px">
        <div class="toolbar">
          <div><span>{{ userInfo.nickname || '未登录' }}</span></div>
          <div>
            <el-dropdown>
              <el-avatar :size="50" :src="userInfo.avatar ? userInfo.avatar : `${userInfo.nickname}`" />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="openEditUserInfo">编辑信息</el-dropdown-item>
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                  <el-dropdown-item v-if="userInfo.role === 1" @click="openAddUserInfo">新增用户</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <el-main>
        <el-scrollbar>
          <!-- 动态组件容器 -->
          <component :is="currentComponent" v-if="currentComponent" />
          <!-- 加载状态提示 -->
          <div v-else class="loading-component">
            <p>正在加载组件...</p>
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
    <!-- 遮罩层 -->
    <div v-if="userInfoVisible" class="mask" @click="closeUserInfo"></div>
    <!-- 用户信息组件 -->
    <el-dialog v-if="userInfoVisible" title="用户信息" v-model="userInfoVisible" :width="userInfoWidth" :modal="false"
      :close-on-click-modal="false">
      <UserInfo :mode="userInfoMode" :init-data="userInfoData" @close="closeUserInfo" @save="handleSaveUserInfo" />
    </el-dialog>
  </el-container>
</template>






<script lang="ts" setup>
import { provide, ref, onMounted, defineAsyncComponent, watch } from 'vue'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { getUserInfo, logout } from '@/js/my_fetch'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import UserInfo from './UserInfo.vue'
import { config } from '@/js/config'
import { editUser, addUser } from '@/js/ts_fetch'


// 定义菜单数据类型
interface MenuItem {
  id: number
  menuName: string
  parentId: number
  path: string
  children?: MenuItem[]
}
// 定义用户信息类型
interface UserInfo {
  nickname: string
  avatar: string
  account?: string  // 可选字段，编辑模式可能需要
  role?: number     // 可选字段，角色信息
  menus?: MenuItem[]
}

// 菜单数据
const menus = ref<MenuItem[]>([])
const activeMenu = ref<string>('')
// 当前显示的组件
const currentComponent = ref<any>(null)
// 组件映射表 - 根据path映射到对应的Vue组件
const componentMap: Record<string, any> = {
  // 这里根据您的实际path配置对应的组件

  // 根据您返回的数据，path是空字符串，我们可以用menuName或其他标识
  '/documents': defineAsyncComponent(() => import('@/components/DocumentViewer.vue')),
  '/users': defineAsyncComponent(() => import('@/components/UserManager.vue')),
}

// 处理菜单选择
const handleMenuSelect = (index: string) => {
  activeMenu.value = index
  const selectedMenu = findMenuById(menus.value, parseInt(index))

  if (selectedMenu) {
    // 根据path或menuName查找对应的组件
    const componentKey = selectedMenu.path || selectedMenu.menuName

    if (componentMap[componentKey]) {
      currentComponent.value = componentMap[componentKey]
    } else {
      // 如果没有找到对应的组件，显示提示
      ElMessage.warning(`未找到对应组件: ${componentKey}`)
    }
  }
}

// 递归查找菜单项
const findMenuById = (menuList: MenuItem[], id: number): MenuItem | null => {
  for (const menu of menuList) {
    if (menu.id === id) {
      return menu
    }
    if (menu.children && menu.children.length > 0) {
      const found = findMenuById(menu.children, id)
      if (found) return found
    }
  }
  return null
}

// 设置默认菜单
const setDefaultMenu = () => {
  if (menus.value.length > 0) {
    // 选择第一个根节点菜单
    const firstMenu = menus.value[0]

    // 如果第一个菜单有子菜单，选择第一个子菜单
    if (firstMenu.children && firstMenu.children.length > 0) {
      const firstChild = firstMenu.children[0]
      activeMenu.value = firstChild.id.toString()

      // 根据path或menuName查找对应的组件
      const componentKey = firstChild.path || firstChild.menuName
      if (componentMap[componentKey]) {
        currentComponent.value = componentMap[componentKey]
      }
    } else {
      // 如果第一个菜单没有子菜单，直接使用它
      activeMenu.value = firstMenu.id.toString()

      // 根据path或menuName查找对应的组件
      const componentKey = firstMenu.path || firstMenu.menuName
      if (componentMap[componentKey]) {
        currentComponent.value = componentMap[componentKey]
      }
    }
  }
}

// 监听菜单数据变化
watch(menus, (newMenus) => {
  if (newMenus && newMenus.length > 0) {
    setDefaultMenu()
  }
})


// 用户信息相关（明确类型）
const userInfo = ref<UserInfo>({ nickname: '', avatar: '' })
const userInfoVisible = ref<boolean>(false)  // 控制显示/隐藏
const userInfoMode = ref<'edit' | 'add'>('edit')  // 模式类型约束
const userInfoData = ref<UserInfo>({ nickname: '', avatar: '' })        // 初始数据类型
const userInfoWidth = ref<string>('40%')

// 打开编辑模式（类型约束）
const openEditUserInfo = (): void => {
  userInfoMode.value = 'edit'
  userInfoData.value = { ...userInfo.value }  // 复制当前用户信息
  userInfoVisible.value = true
}



// 打开新增模式（类型约束）
const openAddUserInfo = (): void => {
  userInfoMode.value = 'add'
  userInfoData.value = { nickname: '', avatar: '' }  // 清空数据
  userInfoVisible.value = true
}

// 关闭用户信息组件
const closeUserInfo = (): void => {
  userInfoVisible.value = false
}

// 提供刷新事件触发器
const refreshUserTable = ref<() => void>(() => { })
provide('refreshUserTable', refreshUserTable)

// 保存用户信息（参数类型约束）
const handleSaveUserInfo = async (data: UserInfo): Promise<void> => {
  try {
    // 模拟保存API调用（实际项目中替换为真实接口）
    console.log('保存用户信息:', data)
    if (userInfoMode.value === 'edit') {
      userInfo.value = { ...data }
      await editUser(data)  // 更新用户信息
    }
    if (userInfoMode.value === 'add') {
      await addUser(data)  // 新增用户
    }
    ElMessage.success('保存成功')
    // 触发表格刷新
    if (refreshUserTable.value) {
      refreshUserTable.value()
    }
    closeUserInfo()
  } catch (error) {
    ElMessage.error(`保存失败: ${error instanceof Error ? error.message : '未知错误'}`)
  }
}

const handleLogout = async () => {
  const resp = await logout()
  if (resp.code !== 200) {
    ElMessage.error('退出登录失败，请重试')
    return
  }
  ElMessage.success('已退出登录')
  // 跳转到登录页
  router.push('/')
}

// 生命周期：获取用户信息

onMounted(async () => {
  console.log('组件已挂载，开始调用getUserInfo接口')
  try {
    const res = await getUserInfo()
    if (res.data) {
      const userData = res.data || { nickname: '', avatar: '' }
      if (userData.avatar) {
        userData.avatar = `${userData.avatar.replace(/^\//, '')}`
      }
      userInfo.value = userData
      // 设置菜单数据
      menus.value = userData.menus || []
    } else {
      // 处理接口返回但没有data的情况
      userInfo.value = { nickname: '', avatar: '' }
      menus.value = []
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    router.push('/')
  }
})

</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
  border-bottom: 2px solid #e5e7eb;
  /* 浅灰色边框 */
}

.layout-container-demo .el-aside {
  color: #ffffff;
  /* 文字白色，与深色背景对比 */
  background: #c6e2ff;
  /* 左侧导航栏右侧添加边框，与右侧区域区分 */
  border-right: 1px solid #e5e7eb;
  /* 浅灰色边框 */
}

.layout-container-demo .el-menu {
  border-right: 1px;
  background: transparent;
}

/* 可选：优化交互状态（hover/选中时）的背景，避免白色高亮 */
.layout-container-demo .el-menu-item:hover,
.layout-container-demo .el-menu-item.is-active,
.layout-container-demo .el-sub-menu__title:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  /* 半透明白色，与浅蓝底色协调 */
}

.layout-container-demo .el-main {
  padding: 0;
  margin: 10px;
  /* 增加外间距，与周围区域拉开距离 */
  border-radius: 4px;
  /* 轻微圆角，提升视觉效果 */
  border: 1px solid #e5e7eb;
  /* 四周边框 */
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
  gap: 10px;
}
</style>
